<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			canvas {
				background: pink;
				margin: 0 auto;
				display: block;
			}
		</style>
	</head>

	<body>
		<canvas id="myCan" width="800" height="800">
			您的浏览器不支持canvas，请升级浏览器！
		</canvas>
		<div class="box"></div>
		<script>
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			var oImg = new Image();
			oImg.src = './images/1.jpg';
			oImg.onload=function(){
				// 图片加载完成
				// ctx.drawImage(oImg,0,0);
				// ctx.drawImage(oImg,50,50,600,600);
				// ctx.drawImage(oImg,50,50,100,100,200,200,100,100);
				ctx.drawImage(oImg,400,440,500,500,200,200,400,400);
			}
		</script>
	</body>

</html>
